<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<style>
		body {
			margin: 10;
			font-size: 62.5%;
			line-height: 1.5;
		}

		.blue-button {
			background: #25A6E1;
			padding: 3px 20px;
			color: #fff;
			font-size: 10px;
			border-radius: 2px;
			-moz-border-radius: 2px;
			-webkit-border-radius: 4px;
			border: 1px solid #1A87B9
		}

		table {
			width: 60%;
		}

		th {
			background: SteelBlue;
			color: white;
		}

		td,
		th {
			border: 1px solid gray;
			font-size: 12px;
			text-align: center;
			padding: 5px 10px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			max-width: 200px;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-overflow: ellipsis;
		}
	</style>
</head>
<title>SpringBoot</title>
<script>
	let source = new EventSource("/sse/connect/001")
	source.onmessage = function (event) {
		document.getElementById("result").innerText = event.data + '%';
		document.getElementById("my-progress").value = event.data;
	}

	//解析json数据
	source.addEventListener("json", function (e) {
		document.getElementById('json').innerHTML = '<a target="_blank" href=\"'+e.data+"\">"+e.data+"</a>";
	});
</script>

<body>
	<div class="wrapper-page">
		<table align="center">
			<tr>
				<th colspan="4">Navigate</th>
			</tr>
			<tr>
				<td><a href="/index" target="_self">index</a></td>
				<td><a href="/404" target="_self">出错页面</a></td>
				<td><a href="/h2-console" target="_blank">H2</a></td>
				<td><a href="/doc.html" target="_blank">doc.html</a></td>
			</tr>
		</table>
		<div class="ex-page-content text-center">
			<h2 align="center">
				<a href="/">reload</a>
				<div><progress style="width: 60%" id="my-progress" value="0" max="100"></progress></div>
				<span style="color:red;" id="result"></span> 
			</h2>
			<h3 id="json">json</h3>
		</div>
	</div>
</body>

</html>